<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>分类列表-blog</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/X-admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/X-admin/css/xadmin.css}">
    <!-- jQuery -->
    <script type="text/javascript" th:src="@{/X-admin/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/X-admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/X-admin/js/xadmin.js}" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="categoryName" placeholder="请输入分类名" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search_btn">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                           onclick="reload();" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table id="blogCategoryList" lay-filter="blogCategoryList"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="isDeletedTool">
    {{#  if(d.isDeleted == 1){ }}
    <input type="checkbox" name="isDeleted" lay-skin="switch" value="{{d.categoryId}}"
           lay-text="已删除|未删除" lay-filter="isDeleted" checked>
    {{#  } else { }}
    <input type="checkbox" name="isDeleted" lay-skin="switch" value="{{d.categoryId}}"
           lay-text="已删除|未删除" lay-filter="isDeleted">
    {{#  } }}
</script>
<script type="text/html" id="blogListBar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="clear">清除</a>
</script>
<script type="text/html" id="hint">
    <button class="layui-btn layui-btn-sm" lay-event="addCategory">添加分类信息</button>
    <sapn class="x-red">删除分类时,会将跟它绑定的文章全部重置为默认分类!</sapn>
</script>
<script type="text/javascript" th:inline="none">
    layui.use(['form', 'layer', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            table = layui.table;

        var tableIns = table.render({
            elem: '#blogCategoryList',
            id: "blogCategoryTable",
            url: '/admin/v1/category/paging',
            title: '分类列表',
            page: true,
            height: "full-110",
            toolbar: "#hint",
            limits: [10],
            cols: [[
                {type: 'checkbox', field: 'blogId',width:"7%"},
                {field: 'categoryName', title: '分类名', align: "center", unresize: "true",width:'30%',edit: 'text'},
                {field: 'categoryRank', title: '排序值', align: 'center', unresize: "true",width:'23%',edit: 'text'},
                {field: 'isDeleted', title: '当前状态', align: 'center', unresize: "true",width:'20%',templet: '#isDeletedTool'},
                {title: '操作', align: "center", unresize: "true", toolbar: "#blogListBar",width:'20%'}
            ]]
        });

        //搜索
        form.on('submit(search_btn)', function (data) {
            var datas = data.field;
            for (var property in datas){
                if (datas[property] === ""){
                    delete datas[property];
                }
            }
            tableIns.reload({
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        table.on('edit(blogCategoryList)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            delete data['createTime'];
            $.post("/admin/v1/category/update",data, function (s) {
                layer.msg(s.message);
            });
        });

        form.on('switch(isDeleted)', function (data) {
            var isDeleted = data.elem.checked ? 1 : 0; //1为已删除,0为未删除
            var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            $.post("/admin/v1/category/isDel",
                {
                    "categoryId": data.value,
                    "isDeleted": isDeleted
                }, function (s) {
                    setTimeout(function () {
                        top.layer.close(index);
                        form.render('select', 'isDeleted');
                        top.layer.msg(s.message);
                    }, 500);
                });
        });

        //头工具栏事件
        table.on('toolbar(blogCategoryList)', function(obj){
            switch(obj.event){
                case 'addCategory':
                    xadmin.open('信息添加','/admin/v1/category/add',450,250);
                    break;
            }
        });

        //监听工具条
        table.on('tool(blogCategoryList)', function(obj){
            var data = obj.data, //获得当前行数据
                layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'clear') {
                layer.confirm('确定清除？关联的文章分类信息将被清空',{icon:3, title:'提示信息'},function(index){
                    $.post("/admin/v1/category/clear",
                        {
                            "categoryId": data.categoryId
                        }, function (s) {
                            layer.msg(s.message);
                        });
                    layer.close(index);
                    tableIns.reload();
                });
            }
        });
    });

    function reload(){
        $.get("/admin/v1/reload",function(data){
            if (data){
                location.reload();
            }else{
                parent.location.reload();
            }
        });
    }
</script>
</body>
</html>